<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>发布班级通知</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/layui.css" />
	<style>
		#portrait {
			width: 100px;
			height: 100px;
		}

		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #1E9FFF;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #1E9FFF;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}
	</style>
</head>

<body>


	<br /><br />


	<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
		<input type="file" id="file" name="file" accept="image/*">
	</form>
	<div class="layui-col-md6 layui-col-md-offset3" id="vue-root">
		<div class="layui-form-item" style="margin-left:0">
			<label class="layui-form-label">发布人</label>
			<div class="layui-input-block">
				<select v-model="item.teacherId" v-validate="'required'" name="teacherId"
					style="min-height: 36px; width: 70% !important;" data-vv-as="发布人">
					<option :value="undefined" disabled="disabled">请选择发布人</option>
					<option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id" v-text="teacher.name">
					</option>
				</select>
				<div class="checkout_state" v-text="err('teacherId')"></div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">班级</label>
			<div class="layui-input-block">
				<select v-model="item.classesId" v-validate="'required'" name="classesId" :disabled="all_class"
					style="min-height: 36px; width: 70% !important;" data-vv-as="班级">
					<option :value="undefined" disabled>请选择班级</option>
					<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
					</option>
				</select>
				<input type="checkbox" v-model="all_class" name="" id="">全选
				<div class="checkout_state" v-text="err('classesId')"></div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-block">
				<input name="courseName" autocomplete="off" placeholder="请输入标题" class="layui-input"
					v-model="item.title">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">内容</label>
			<div class="layui-input-block" style="width: 150%;">
				<!-- <textarea name="courseName" autocomplete="off" placeholder="请输入内容" class="layui-textarea text"
					v-model="item.text"></textarea> -->
				<editor :init="init" v-model="item.text" />
			</div>
		</div>

		<!-- <div class="layui-form-item">
			<label class="layui-form-label">图片</label>
			<label for="File1" id="tu1">
				<img id="portrait" :src="img">
			</label>
			
		</div> -->
		<br />
		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="offer" @click="submit_all" v-if="all_class">批量提交</div>
				<div class="offer" @click="submit" v-else>立即提交</div>
				<div class="return" onclick="history.back()">取消</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/qs.min.js"></script>



	<script src="/scriptZIP/tinymce.min.js"></script>
	<script src="/lib/tinymce-vue.min.js"></script>
	<script src="/js/tinymce_image_plugin.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		var schoolId = top_params().id;
		var field = 'classes_notice';
		new Vue(merge({
			components: {
				editor: Editor
			},
			data: {
				all_class: false,
				teachers: [],
				classess: [],
				item: {
					pic: null
				},
				url: '/pc/classesNotice',
				init: tinymceInit
			},
			created: function () {
				axios.get('/pc/teacher/all/' + schoolId).then(function (res) {
					this.teachers = res.data;
				}.bind(this));
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
			},
			methods: {
				fillData: function () {
					this.item.text0 = getText(this.item.text);
				},
				submit_all() {
					var items = [];

					this.classess.forEach(function (data) {
						var item = JSON.parse(JSON.stringify(this.item))
						item.classesId = data.id
						items.push(axios.post(this.url, item))
					}.bind(this));

					Promise.all(items).then(function () {
						alert(locale == 'en' ? 'succeed' : '成功');
						history.back();
					})
				},
			},
			computed: {
				img: function () {
					if (!this.item.pic) return '/image/upload.png';
					return '/static/' + schoolId + '/classes_notice/' + this.item.pic;
				},
			},
			watch: {
				'item.text': function (nv, ov) {
					replaceImg(this.item, 'text');
				}
			}
		}))
	</script>
</body>

</html>